<template>
    <ul class="content">
        <li v-for="item in list" :key="item.id" @click="GoDetailPage(item)">
            <img class="img" :src="item.small_image" alt="">
            <p class="title">{{item.name}}</p>
            <p class="text">{{item.spec}}</p>
            <div class="pce">
                <div>
                    <span class="price">￥{{item.price}}</span>
                    <span class="oldPrice">￥{{item.origin_price}}</span>
                </div>
                <img src="../assets/car.png" alt="" @click.stop="shopping(item)">
            </div>
        </li>
    </ul> 
</template>

<script>
export default {
    name:"List",
    props:["list"],
    methods:{
        GoDetailPage(item){
            this.$store.commit('setDetailPageData',item)
            sessionStorage.setItem("setDetailPageData",JSON.stringify(item))
            this.$router.push('/DetailPage').catch(err=>{})
            // console.log(item)
        },
        shopping(item){
            this.$store.commit('setShoppingData',item)
            this.$toast('成功加入购物车');
        }
    }
}
</script>

<style lang="less" scoped>
.img{
    box-sizing: border-box;
    padding: 0.7rem .7rem;
    flex: 1;
    width: 5rem;
    margin: 0 auto;
}
.content{
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-top: .3rem;
    justify-content: space-between;
    li{
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        width: 48%;
        height: 18rem;
        margin-bottom: .6rem;
        p{
            text-align: center;
            // box-sizing: border-box;
            //  padding: 0.7rem .7rem;
            width: 100vw;
            height: 1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .title{
            font-size: .8rem;
        }
        .text{
            width: 100%;
            font-size: .8rem; 
        }
        .pce{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            div{
                span{
                    font-size: .8rem;
                }
                .price{
                    color: rgb(255, 74, 92);
                }
                .oldPrice{
                    margin-left: .4rem;
                    text-decoration: line-through;
                    color: rgb(166, 161, 161);
                }
            }
            img{
                width: 1.8rem;
                height: 1.8rem;
            }
        }
        
    }
}
</style>